<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .handle-input {
            width: 300px;
            display: inline-block;
        }

        .handle-box {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="handle-box">
        <el-input v-model="qryTableName" placeholder="请输入表名" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="search" @click="search">搜索</el-button>
    </div>
    <el-table v-loading="loading" :data="tableData" border
              style="width: 100%"
              :row-class-name="tableRowClassName">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="tableName"
                label="表名">
        </el-table-column>
        <el-table-column
                prop="engine"
                label="Engine">
        </el-table-column>
        <el-table-column
                prop="tableComment"
                label="表备注">
        </el-table-column>
        <el-table-column
                prop="createTime"
                label="创建时间">
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="cur_page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/element-ui.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                url: 'sys/generator/list',
                tableData: [],
                recordData: [],
                cur_page: 1,
                pageSize: 10,
                multipleSelection: [],
                sendDate: '',
                del_list: [],
                is_search: false,
                editVisible: false,
                delVisible: false,
                idx: -1,
                totalCount: 0,
                loading: false,
                recordLoading: true,
                value: '',
                qryTableName: '',
                selectEmptyFlag: false // 设置下拉框是否有空白选项
            }
        },
        created() {
            this.getData()
        },
        computed: {
            data() {
                return this.tableData
            }
        },
        methods: {
            tableRowClassName: function (row) {
                if (row.rowIndex % 2 == 0) {
                    return 'success-row';
                } else {
                    return '';
                }
            },
            search: function () {
                this.cur_page = 1;
                this.getData();
            },
            handleCurrentChange: function (val) {
                this.cur_page = val
                this.getData()
            },
            handleSizeChange: function (val) {
                this.cur_page = 1
                this.pageSize = val
                this.getData()
            },
            getData: function () {
                this.loading = true
                var that = this
                axios.get(this.url, {
                    params: {
                        limit: this.pageSize,
                        page: this.cur_page,
                        tableName: this.qryTableName
                    }
                }).then(function (response) {
                    console.dir(response.data.page.list)
                    that.tableData = response.data.page.list
                    that.totalCount = response.data.page.totalCount
                    that.loading = false
                    that.tableRowClassName
                    console.log(response);
                }).catch(function (error) {
                    console.log(error);
                });
            }
        }
    })
</script>
</html>